<template>
  <h2>姓名：{{ user.name }}</h2>
  <h2>年龄：{{ user.age }}</h2>
  <h2>薪水：{{ user.job.salary }}K</h2>
  <button @click="user.name += '%'">修改姓名</button>
  <button @click="user.age++">修改年龄</button>
  <button @click="user.job.salary++">修改薪水</button>
  <hr />
  <button @click="user = { name: 'mark', age: 18, job: { salary: 15 } }">
    修改user对象
  </button>
</template>

<script lang="ts">
import { shallowRef } from "vue";
export default {
  setup() {
    //当ref中是对象类型时会间接调用reactive完成响应式
    //只处理基本数据类型的响应式, 不进行对象的响应式处理。
    let user = shallowRef({
      name: "rose",
      age: 99,
      job: {
        salary: 30,
      },
    });

    console.log(user);

    return { user };
  },
};
</script>
